<template>
  <yt-page title="个人资料" type="siample" scroll>
    <yt-split />
    <yt-cell label="头像" isLink border="none">
      <img class="avatar" :src="User.avatar_path || require('./common/avatar.png')">
      <input class="upload" type="file" @change="onChange" ref="input">
    </yt-cell>
    <yt-cell label="昵称" isLink border="none" :value="User.name" @click="onChangeName"></yt-cell>
    <yt-cell label="性别" border="none" :value="User.sex"></yt-cell>
    <yt-split />
    <yt-cell label="账号" border="none" :value="User.username"></yt-cell>
    <yt-cell label="职责" border="none" :value="User.remark || '未填写'"></yt-cell>
    <yt-cell label="部门" border="none" :value="User.department || '未填写'"></yt-cell>
    <yt-split />
    <yt-cell label="手机" isLink border="none" :value="User.tel" @click="onChangePhoneNum"></yt-cell>
    <yt-cell label="邮件" border="none" :value="User.email || '未填写'"></yt-cell>
    <yt-cell label="修改密码" @click="toModifyPwd" isLink border="none"></yt-cell>
    <yt-popup pos="bottom" v-model="isShow" fixed>
      <yt-cell :label="popupLabel">
        <yt-input v-model="popupValue"></yt-input>
      </yt-cell>
      <yt-btn @click="confirmChange" edge>确定</yt-btn>
    </yt-popup>

    <yt-popup pos="bottom" v-model="phoneIsShow" fixed>
      <yt-cell :label="popupLabel">
        <yt-input v-model="popupValue"></yt-input>
      </yt-cell>
      <yt-btn @click="confirmPhoneChange" edge>确定</yt-btn>
    </yt-popup>
  </yt-page>
</template>
<script>
import { GetStore, SetStore, Store } from '@/store'
import { commonApi } from '@/common/api/commonApi.js'

export default {
  name: 'personal',
  data() {
    return {
      User: {},
      isShow: false,
      phoneIsShow: false,
      popupLabel: "",
      popupValue: ""
    }
  },
  methods: {
    async fetchData() {
      let user = GetStore(Store.user)
      this.User = await commonApi.searchById('User', user.id)
      SetStore(Store.user, this.User)
    },
    toModifyPwd() {
      this.$router.$push('/base/modifyPwd')
    },
    async onChange(e) {
      let files = e.target.files
      if (files && files.length) {
        try {
          let res = await commonApi.uploadFile(files[0])
          let user = GetStore(Store.user)
          let obj = { id: user.id, avatar_path: res._url }
          await commonApi.save('User', obj)
          this.fetchData()
          this.$Toast('上传成功!', 'success')
        } catch (e) {
          this.$Toast('上传失败!', 'error')
        }
      }
      e.target.value = null
    },
    onChangeName() {
      this.popupLabel = "新昵称";
      this.popupValue = this.User.name;
      this.isShow = true;
    },
    onChangePhoneNum() {
      this.popupLabel = "手机号";
      this.popupValue = this.User.tel;
      this.phoneIsShow = true;
    },
    async confirmChange() {
      if (this.popupValue) {
        let obj = { id: this.User.id, name: this.popupValue }
        await commonApi.save('User', obj);
        this.fetchData()
        this.isShow = false;
      } else {
        this.$Toast("昵称不能为空！", "error");
      }
    },
    async confirmPhoneChange() {
      if (this.popupValue) {
        let obj = { id: this.User.id, tel: this.popupValue }
        await commonApi.save('User', obj)
        this.fetchData()
        this.phoneIsShow = false
      } else {
        this.$Toast("手机号不能为空！", "error")
      }
    }
  },
  activated() {
    this.fetchData()
  }
}
</script>
<style scoped lang="stylus">
.avatar {
  margin: 5px 8px;
  display: inline-block;
  width: 55px;
  height: 55px;
  border-radius: 50%;
}

.upload {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 10;
}
</style>
